<template>
  <div style="display: flex;flex-direction: column;align-items: center;position: relative;min-height: 20px;">
    <div style="display: flex;flex-direction: row;position: relative;"
      :style="{
        'marginTop': nodeModel.marginTop/2+'px',
        'width': nodeModel.width/2 + 'px',
        'height': nodeModel.height/2 + 'px'
      }">
      <div style="display: flex;flex-direction: row;">
        <div style="width: 100px;height: 100%;background-color: #EFEFEF;display: flex;flex-direction: column;align-items: center;"
        :style="{
              'width': nodeModel.configDict.componentStyle.marginLeft/2+'px'
            }">
          <div v-if="nodeModel.configDict.componentStyle.options1" style="display: flex;flex-direction: row;align-items: center;height: 50px;line-height: 50px;">
            <div style="width: 15px;height: 1px;background-color: #666666;"></div>
            <div style="margin: 0 5px;color: #666666;font-size: 14px;">{{nodeModel.configDict.componentStyle.options1}}</div>
            <div style="width: 15px;height: 1px;background-color: #666666;"></div>
          </div>
          <!-- 组一 -->
          <div v-if="nodeModel.configDict.componentStyle.type=='1'"
          style="display: flex;flex-direction: column;align-items: flex-start;width: 100%;">
            <div style="width: 100%;line-height: 20px;font-size: 15px;padding: 10px 0;display: flex;flex-direction: row;align-items: center;" v-if="item.types=='group1'" v-for="(item, index) of nodeModel.configDict.itemList" :key='index'
            :style="{
                'background-color': index==0?'#FFF':'',
              }">
              <div style="width: 4px;height: 14px;" :style="{
                'background-color': index==0?nodeModel.configDict.componentStyle.mainColor:'',
              }"></div>
              <div style="width: 100%;text-align: center;margin-left: 2px;" :style="{
                'color': index==0?nodeModel.configDict.componentStyle.mainColor:'',
              }">
                {{item.title}}
              </div>
            </div>
          </div>
          <div v-else-if="nodeModel.configDict.componentStyle.type=='2'"
          style="display: flex;flex-direction: column;align-items: center;width: 100%;">
            <div style="width: 100%;line-height: 20px;text-align: center;font-size: 15px;padding: 10px 0;" v-if="item.types=='group1'" v-for="(item, index) of nodeModel.configDict.itemList" :key='index'
            :style="{
              'color': index==0?nodeModel.configDict.componentStyle.colorForBtn1:'',
              'background-color': index==0?nodeModel.configDict.componentStyle.mainColor:'',
            }">{{item.title}}</div>
          </div>
          <div v-if="nodeModel.configDict.componentStyle.options2" style="display: flex;flex-direction: row;align-items: center;height: 50px;line-height: 50px;">
            <div style="width: 15px;height: 1px;background-color: #666666;"></div>
            <div style="margin: 0 5px;color: #666666;font-size: 14px;">{{nodeModel.configDict.componentStyle.options2}}</div>
            <div style="width: 15px;height: 1px;background-color: #666666;"></div>
          </div>
          <!-- 组二 -->
          <div v-if="nodeModel.configDict.componentStyle.type=='1'"
          style="display: flex;flex-direction: column;align-items: flex-start;width: 100%;">
            <div style="width: 100%;line-height: 20px;font-size: 15px;padding: 10px 0;display: flex;flex-direction: row;align-items: center;" v-if="item.types=='group2'" v-for="(item, index) of nodeModel.configDict.itemList" :key='index'
            :style="{
                'background-color': index==0?'#FFF':'',
              }">
              <div style="width: 4px;height: 14px;" :style="{
                'background-color': index==0?nodeModel.configDict.componentStyle.mainColor:'',
              }"></div>
              <div style="width: 100%;text-align: center;margin-left: 2px;" :style="{
                'color': index==0?nodeModel.configDict.componentStyle.mainColor:'',
                'background-color': index==0?'#FFF':'',
              }">
                {{item.title}}
              </div>
            </div>
          </div>
          <div v-else-if="nodeModel.configDict.componentStyle.type=='2'"
          style="display: flex;flex-direction: column;align-items: center;width: 100%;">
            <div style="width: 100%;line-height: 20px;text-align: center;font-size: 15px;padding: 10px 0;" v-if="item.types=='group2'" v-for="(item, index) of nodeModel.configDict.itemList" :key='index'
            :style="{
              'color': index==0?nodeModel.configDict.componentStyle.colorForBtn2:'',
              'background-color': index==0?nodeModel.configDict.componentStyle.mainColor:'',
            }">{{item.title}}</div>
          </div>
        </div>
        <div style="width: 275px;height: 100%;overflow: hidden;display: flex;flex-direction: row;flex-wrap: wrap;align-content: flex-start;min-height: 20px;">
          <div v-for="(item, index) in nodeModel.itemList" :key="index" 
            style="display: flex;"
            :style="{
              'width': nodeModel.widthForFlex1/2+'px',
              'flex-direction': nodeModel.flex_directionForFlex1,
              'align-items': nodeModel.align_itemsForFlex1,
              'background': nodeModel.backgroundForFlex1,
              'marginTop': nodeModel.marginTopForFlex1/2+'px',
              'marginLeft': nodeModel.marginLeftForFlex1/2+'px',
              'paddingTop': nodeModel.paddingTopForFlex1/2+'px',
              'paddingBottom': nodeModel.paddingBottomForFlex1/2+'px',
              'paddingLeft': nodeModel.paddingLeftForFlex1/2+'px',
              }">
              <el-image :src="item.coverUrl" fit="cover"
                style="flex-shrink: 0;"
                :style="{
                  'width': nodeModel.widthForCover1/2 + 'px', 
                  'height': nodeModel.heightForCover1/2 + 'px', 
                  'borderRadius': nodeModel.borderRadiusForCover1/2 + 'px'
                }"></el-image>
              <div :style="{
                'paddingTop': nodeModel.paddingTopForFlex2/2+'px',
                'paddingBottom': nodeModel.paddingBottomForFlex2/2+'px',
                'paddingLeft': nodeModel.paddingLeftForFlex2/2+'px',
                'paddingRight': nodeModel.paddingRightForFlex2/2+'px',
              }">
                <!-- 商品名称 -->
                <div class="limitLineNumOfOne" v-if="nodeModel.isShowForText1" :style="{
                  'marginTop': nodeModel.marginTopForText1/2+'px',
                  'color': nodeModel.colorForText1,
                  'font-size': nodeModel.fontsizeForText1/2 + 'px',
                  'font-weight': nodeModel.fontweightForText1,
                }">{{item.itemName}}</div>
                <!-- 原价 -->
                <div style="display: flex;flex-direction: row;align-items: center;" v-if="nodeModel.isShowForText2"
                :style="{
                  'marginTop': nodeModel.marginTopForText2/2+'px',
                  'color': nodeModel.colorForText2,
                  'font-size': nodeModel.fontsizeForText2/2 + 'px',
                  'font-weight': nodeModel.fontweightForText2
                }">
                  <div v-if="nodeModel.titleForText2">{{nodeModel.titleForText2}}</div>
                  <div v-if="nodeModel.isShowForText2" :style="{
                    'text-decoration': nodeModel.deleteLineForText2
                  }">¥{{item.marketPrice}}</div>
                </div>
                <!-- 销售价格 -->
                <div style="display: flex;flex-direction: row;align-items: baseline;">
                  <div v-if="nodeModel.isShowForText3" :style="{
                    'marginTop': nodeModel.marginTopForText3/2+'px',
                    'color': nodeModel.colorForText3,
                    'font-size': nodeModel.fontsizeForText3/2 + 'px',
                    'font-weight': nodeModel.fontweightForText3
                  }">¥{{item.price}}</div>
                  <!-- 销量 -->
                  <div style="display: flex;flex-direction: row;align-items: center;margin-left: 8px;" v-if="nodeModel.isShowForText4"
                    :style="{
                      'marginTop': nodeModel.marginTopForText4/2+'px',
                      'color': nodeModel.colorForText4,
                      'font-size': nodeModel.fontsizeForText4/2 + 'px',
                      'font-weight': nodeModel.fontweightForText4
                    }">
                    <div v-if="nodeModel.titleForText4">{{nodeModel.titleForText4}}</div>
                    <div style="margin-left: 4px;">{{item.sales}}</div>
                  </div>
                </div>
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    components: {
        
    },
    props:{
      nodeModel:{
            type: Object,
            default: res=>{}
        },
    },
    data() {
      return {
        userModel: {}
      }
    },
    created() {
      this.userModel = this.$store.getters.userModel
    },
    methods:{
        
    }
  }
</script>

<style lang="scss" scoped>
/* 限制单行,自动省略多余部分 */
.limitLineNumOfOne{
    word-break:break-all;
    overflow : hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
</style>